<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 网络来源图片 用meta标签获取 -->
    <meta name="referrer" content="never" />
    <title>小米</title>
    <link rel="stylesheet" type="text/css" href="../css/xiaomi.css" />
    <link rel="stylesheet" type="text/css" href="../css/commen.css" />
    <link rel="stylesheet" type="text/css" href="../js/iconfont.css" />
    <link rel="stylesheet" href="../css/banner.css" />
    <!-- <link rel="stylesheet" href="../css/detailList.css" /> -->
    <link rel="stylesheet" href="../css/list_index.css" />
    <style>
      .searchTop {
        width: 100%;
        height: 100px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 60px;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
      }
      .searchTop input {
        width: 1000px;
        height: 40px;
        border-radius: 20px 0 0 20px;
        padding-left: 50px;
        border: none;
      }
      .searchTop button {
        width: 120px;
        height: 44px;
        border: none;
        color: #fff;
        font-size: 20px;
        background-color: rgb(73, 73, 243);
        border-radius: 0 22px 22px 0;
      }
      .fixed > a.active {
        background: rgb(245, 174, 174);
        color: #fff;
      }
      /*  */
      .searchTop2 {
        width: 100%;
        height: 80px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 60px;
      }
      .searchTop2 input {
        width: 1000px;
        height: 40px;
        border-radius: 20px 0 0 20px;
        padding-left: 50px;
        outline: none;
      }
      .searchTop2 button {
        width: 120px;
        height: 46px;
        border: none;
        color: #fff;
        font-size: 20px;
        background-color: rgb(73, 73, 243);
        border-radius: 0 22px 22px 0;
      }
      .searchTop2 button:hover {
        color: #aaa;
        box-shadow: 0 0 2px 1px #aaa;
      }
    </style>
  </head>
  <body>
    <!-- 模拟页面的吸顶部分 -->
    <div class="searchTop">
      <input type="text" placeholder="我是页面吸顶的搜索栏" />
      <button>搜索</button>
    </div>
    <!-- 右侧固定 -->
    <div class="fixed">
      <a name="oLi" class="fixedBox txt">
        <img class="img1" src="../img/images/fex1-1.png" />
        <img class="img2" src="../img/images/fex1.png" style="display: none" />
        <br />
        <span>食品酒水</span>
      </a>
      <!--  -->
      <a name="oLi" class="fixedBox txt">
        <img class="img1" src="../img/images/fex2-2.png" />
        <img class="img2" src="../img/images/fex2.png" style="display: none" />
        <br />
        <span>童装玩具</span>
      </a>
      <!--  -->
      <a name="oLi" class="fixedBox txt">
        <img class="img1" src="../img/images/fex3-3.png" />
        <img class="img2" src="../img/images/fex3.png" style="display: none" />
        <br />
        <span>奶粉尿裤</span>
      </a>
      <!--  -->
      <a name="oLi" class="fixedBox txt">
        <img class="img1" src="../img/images/fex4-4.png" />
        <img class="img2" src="../img/images/fex4.png" style="display: none" />
        <br />
        <span>家装建材</span>
      </a>
      <!--  -->
      <a name="oLi" class="fixedBox txt">
        <img class="img1" src="../img/images/fex5-5.png" />
        <img class="img2" src="../img/images/fex5.png" style="display: none" />
        <br />
        <span>其他</span>
      </a>
      <a name="back" class="fixedBox txt">
        <img class="img1" src="../img/images/fex5-5.png" />
        <img class="img2" src="../img/images/fex5.png" style="display: none" />
        <br />
        <span>返回顶部</span>
      </a>
      <!--  -->
    </div>
    <!-- 头部 -->
    <div class="header">
      <div class="head wid auto">
        <div class="hedLeft">
          <ul>
            <li><a href="">用户名</a><span>|</span></li>
          </ul>
        </div>
        <div class="hedRight fr">
          <ul>
            <li><a href="#" name="login"></a><span>|</span></li>
            <li><a href="./reg2.html?./index.html">注册</a><span>|</span></li>
            <li><a href="#" name="logout">退出登录</a></li>
            <li><a href="#" name="cart">购物车</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="searchTop2">
      <input type="text" placeholder="我是页面吸顶的搜索栏" />
      <button>搜索</button>
    </div>
    <!-- banner nav部分 -->
    <div class="bannerAll wid auto">
      <div class="navBox fl">
        <ul>
          <li><a href="#" name="1">食品酒水</a></li>
          <li><a href="#" name="1">童装玩具</a></li>
          <li><a href="#" name="1">家装建材</a></li>
          <li><a href="#" name="1">奶粉尿裤</a></li>
          <li><a href="#" name="1">食品酒水</a></li>
          <li><a href="#" name="1">童装玩具</a></li>
          <li><a href="#" name="1">家装建材</a></li>
          <li><a href="#" name="1">奶粉尿裤</a></li>
          <li><a href="#" name="1">其他</a></li>
          <li><a href="#" name="1">其他</a></li>
        </ul>
      </div>
      <div class="btn">
        <div class="leftBtn txt fl"><img src="../img/images/img2.png" /></div>
        <div class="rightBtn txt fr"><img src="../img/images/img1.png" /></div>
      </div>
      <div class="banner">
        <!-- <img src="../img/images/banner2.jpg" alt="" /> -->
        <ul></ul>
        <ol></ol>
      </div>
    </div>
    <!-- 瀑布流部分 -->
    <div class="detailList">
      <div class="bear">食品酒水</div>
      <ul class="cart1 cartO"></ul>
      <div class="bear">童装玩具</div>
      <ul class="cart2 cartO"></ul>
      <div class="bear">奶粉尿裤</div>
      <ul class="cart3 cartO"></ul>
      <div class="bear">家装建材</div>
      <ul class="cart3 cartO"></ul>
      <div class="bear">其他</div>
      <ul class="cart4 cartO"></ul>
      <ul class="cart5 cartO" style="height: 800px; width: 100%"></ul>
    </div>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/lead.js"></script>
    <script src="../js/banner.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/detail.js"></script>
    <script src="../js/tools.js"></script>

    <script>
      const cookieObj = myGetCookie();
      if (cookieObj.login === "1") {
        $("[name=login]").html("已登录");
      } else if (cookieObj.login !== "1") {
        $("[name=login]").html("未登录");
      }
      //注册按钮跳转地址写在a标签里了
      //登录按钮
      $('[name="login"]').click(function () {
        //跳转登录页面 同时携带当前页面的url地址
        window.location.href = `./login2.html?url=${window.location.href}`;
      });
      //退出登录按钮
      $('[name="logout"]').click(function () {
        //先获取cookie对象
        const cookieObj = myGetCookie();

        //判断是否已经登录
        if (cookieObj.login === "1") {
          mySetCookie("login", 0, -1, "/");
          //刷新页面，让登陆显示为未登录
          window.location.href = `${window.location.href}`;
          window.alert("您已经退出登录了");
        } else {
          window.alert("您还未登录，请先登录");
          window.location.href = "./login2.html?url=index.html";
        }
      });
      //3.跳转购物车
      $("[name=cart]").click(function () {
        const cookieObj = myGetCookie();
        if (cookieObj.login === "1") {
          window.location.href = "./cart2.html";
        } else {
          if (window.confirm("您还未登录，请先登录")) {
            window.location.href = `./login2.html?url=${window.location.href}`;
          }
        }
      });
      //点击商品分类标签
      $('[name="1"]').click(function () {
        window.location.href = `./list2.html?id=${$(this).html()}`;
      });
      ////搜索
      $(".searchTop2 button").click(function () {
        const inputVal = $(".searchTop2 input").val();
        // console.log(inputVal);
        if (inputVal === "") {
          return;
        }
        //根据用户输入的信息查找相应文字
        const arr = ["食品酒水", "童装玩具", "家装建材", "奶粉尿裤"];
        //遍历数组 和输入的信息对比 能对应就跳转
        for (let i = 0; i < arr.length; i++) {
          //   console.log(i);
          if (arr[i] === inputVal) {
            window.location.href = `./list2.html?id=${inputVal}`;
          } else {
            alert("信息不存在");
            break;
          }
        }
      });
    </script>
  </body>
</html>
